<template>
  <div class="app-container">
    <el-row :gutter="40">
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20" style="width: 1300px">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input
              v-model="query.blurry"
              clearable
              size="small"
              placeholder="输入户主姓名或户内编号进行搜索"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
            <el-date-picker
              v-model="query.starttime"
              :default-time="['00:00:00','23:59:59']"
              type="daterange"
              range-separator=":"
              size="small"
              class="date-item"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <rrOperation :crud="crud" />
          </div>
          <crudOperation show="" :permission="permission" />
        </div>
        <!--表单渲染-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="160px">
            <el-form-item label="户内编号" prop="code">
              <el-input v-model="form.code" />
            </el-form-item>
            <el-form-item label="户主姓名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="身份证号" prop="card">
              <el-input v-model="form.card" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 176px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="nation.id">
              <el-select v-model="form.nation.id" placeholder="请选择民族" style="width: 176px">
                <el-option
                  v-for="item in nations"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="健康状态" prop="heath">
              <el-select v-model="form.heath" placeholder="请选择性别" style="width: 176px">
                <el-option
                  v-for="item in heathOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文化程度" prop="culture">
              <el-input v-model="form.culture" />
            </el-form-item>
            <el-form-item label="人员属性" prop="attr">
              <el-input v-model="form.attr" />
            </el-form-item>
            <el-form-item label="是否农业户口" prop="isfarm">
              <el-select v-model="form.isfarm" placeholder="是否农业户口" style="width: 176px">
                <el-option
                  v-for="item in farmOptions"
                  :label="item.label"
                  :key="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="婚姻情况" prop="wedding">
              <el-select v-model="form.wedding" placeholder="是否已婚" style="width: 176px">
                <el-option
                  v-for="item in weddingOptions"
                  :label="item.label"
                  :key="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话号码" prop="telephone">
              <el-input v-model="form.telephone" />
            </el-form-item>
            <el-form-item label="农合证号" prop="farmid">
              <el-input v-model="form.farmid" />
            </el-form-item>
            <el-form-item label="是否农村户口" prop="iscountry">
              <el-select v-model="form.iscountry" placeholder="是否农村户口" style="width: 176px">
                <el-option
                  v-for="item in iscountryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作单位" prop="work">
              <el-input v-model="form.work" />
            </el-form-item>
            <el-form-item label="慢性病开始时间" prop="starttime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.starttime) }}</span>
              </template>
            </el-form-item>
            <el-form-item label="慢性病结束时间" prop="endtime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endtime) }}</span>
              </template>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%"  @selection-change="crud.selectionChangeHandler">
          <el-table-column :selectable="checkboxT" type="selection" width="60" />
          <el-table-column v-if="columns.visible('code')" :show-overflow-tooltip="true" prop="code" label="户内编号" />
          <el-table-column v-if="columns.visible('name')" :show-overflow-tooltip="true" prop="name" label="户主姓名" />
          <el-table-column v-if="columns.visible('card')" :show-overflow-tooltip="true" prop="card" label="身份证号" align="center" width="160"/>
          <el-table-column v-if="columns.visible('sex')" :show-overflow-tooltip="true" prop="sex" label="性别" :formatter="formatSex"/>
          <el-table-column v-if="columns.visible('nationid')" :show-overflow-tooltip="true" prop="nation.name" label="民族" />
          <el-table-column v-if="columns.visible('heath')" :show-overflow-tooltip="true" prop="heath" label="健康状态" :formatter="formatHeath" />
          <el-table-column v-if="columns.visible('culture')" :show-overflow-tooltip="true" prop="culture" label="文化程度" />
          <el-table-column v-if="columns.visible('attr')" :show-overflow-tooltip="true" prop="attr" label="人员属性" />
          <el-table-column v-if="columns.visible('isfarm')" :show-overflow-tooltip="true" prop="isfarm" label="是否农业户口" width="120" :formatter="formatIsfarm" align="center"/>
          <el-table-column v-if="columns.visible('wedding')" :show-overflow-tooltip="true" prop="wedding" label="婚姻情况" align="center" :formatter="formatWedding"/>
          <el-table-column v-if="columns.visible('telephone')" :show-overflow-tooltip="true" prop="telephone" label="电话号码" align="center" width="160" />
          <el-table-column v-if="columns.visible('farmid')" :show-overflow-tooltip="true" prop="farmid" label="农合证号" />
          <el-table-column v-if="columns.visible('iscountry')" :show-overflow-tooltip="true" prop="iscountry" label="是否农村户口" width="120" :formatter="formatIscountry"/>
          <el-table-column v-if="columns.visible('work')" :show-overflow-tooltip="true" prop="work" label="工作单位" width="120" />
          <el-table-column :formatter="dateFormat" v-if="columns.visible('starttime')" :show-overflow-tooltip="true" prop="starttime" label="慢性开始时间" width="120"/>
          <el-table-column :formatter="dateFormat"  prop="endtime" label="慢性结束时间" width="120"/>
          <el-table-column
            v-permission="['admin','farmer:edit','farmer:del']"
            label="操作"
            width="125"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import crudHome from '@/api/vocation/home'
  import { getNations } from "@/api/common/nation";
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import { getToken } from '@/utils/auth'

  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '参合农民档案', url: 'api/home', crudMethod: { ...crudHome }})
  const defaultForm = { id: null, code: null, name: null, card: null, sex: null, nation: {id: null}, heath: null, culture: null, attr: null, isfarm: null, wedding: null, telephone: null, farmid: null, iscountry: null, work: null , starttime: null, endtime: null}
  export default {
    components: { Treeselect, crudOperation, rrOperation, udOperation, pagination },
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        homefiles: [],
        // 上传附件带上token
        headers: {
          'Authorization': getToken()
        },
        fileList: [],
        nations: [],
        options: [{
          value: '1',
          label: '男'
        }, {
          value: '0',
          label: '女'
        }],
        farmOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        j_AreaStatusOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        iscountryOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        weddingOptions: [{
          value: '1',
          label: '已婚'
        }, {
          value: '0',
          label: '未婚'
        }],
        heathOptions: [{
          value: '0',
          label: '健康'
        }, {
          value: '1',
          label: '正常'
        }, {
          value: '2',
          label: '良好'
        }],
        value: '',
        height: document.documentElement.clientHeight - 180 + 'px;',
        defaultProps: { children: 'children', label: 'group' },
        permission: {
          add: ['admin', 'vocation', 'home:add'],
          edit: ['admin', 'vocation', 'home:edit'],
          del: ['admin', 'vocation', 'home:del']
        },
        rules: {
          code: [
            { required: true, message: '户内编号', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '户主姓名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          card: [
            { required: true, message: '身份证号', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          culture: [
            { required: true, message: '文化程度', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          attr: [
            { required: true, message: '人员属性', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          telephone: [
            { required: true, message: '电话号码', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          farmid: [
            { required: true, message: '农合证号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          work: [
            { required: true, message: '工作单位', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
      this.$nextTick(() => {
        this.crud.toQuery()
        this.getNations()
        this.crud.msg.add = '新增成功'
      })
    },
    mounted: function() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + 'px;'
      }
    },
    methods: {
      [CRUD.HOOK.afterAddError](crud) {
        this.afterErrorMethod(crud)
      },
      [CRUD.HOOK.afterEditError](crud) {
        this.afterErrorMethod(crud)
      },
      afterErrorMethod(crud) {
      },
      deleteTag(value) {
      },
      // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
      },
      // 打开编辑弹窗前做的操作
      [CRUD.HOOK.beforeToEdit](crud, form) {
      },
      // 提交前做的操作
      [CRUD.HOOK.afterValidateCU](crud) {
      },
      checkboxT(row, rowIndex) {
        return row.id !== this.rowIndex
      },
      formatSex(row, column) {
        return row.sex === 1 ? '男' : '女'
      },
      formatHeath(row, column) {
        return row.heath === 0 ? '健康' : row.heath === 1 ? '正常' : '良好'
      },
      formatIsfarm(row, column) {
        return row.isfarm === 0 ? '否' : '是'
      },
      formatWedding(row, column) {
        return row.wedding === 0 ? '未婚' : '已婚'
      },
      formatIscountry(row, column) {
        return row.iscountry === 0 ? '否' : '是'
      },
      getNations() {
        getNations().then(res => {
          this.nations = res
        })
      },
      //文件列表
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      handleSuccess(response, file, fileList) {
        this.$notify({
          title: '文件上传成功',
          type: 'success',
          duration: 2500
        })
        store.dispatch('GetInfo').then(() => {})
      },
      // 监听上传失败
      handleError(e, file, fileList) {
        const msg = JSON.parse(e.message)
        this.$notify({
          title: msg.message,
          type: 'error',
          duration: 2500
        })
      },
      //日期格式化
      dateFormat:function(row,column){
        var date = row[column.property];
        if(date === undefined){return ''};
        return moment(date).format("YYYY-MM-DD")
      },
    },
    computed: {
      ...mapGetters([
        'updateFileApi',
      ])
    },
  }
</script>

<style scoped>
</style>
